<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Scrollbar } from 'swiper'
import {ref} from "vue";
import {getSwiper} from "@/api/home/index";

// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Scrollbar]

// const onSlideChange = (swiper) => {
// // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
// //     console.log(swiper.activeIndex)
// }

// 轮播图接口请求
let dataSwiper = {
    pageNum: 1,
    pageSize: 10
}
let url = 'http://192.168.5.120:8090'
let swiperArr =  ref([])

getSwiper(dataSwiper).then(res => {
    swiperArr.value = res.rows
})
</script>

<template>
    <div>
        <swiper
            :modules="modules"
            :loop="true"
            :slides-per-view="1"
            :space-between="50"
            :autoplay="{ delay: 5000, disableOnInteraction: false }"
            :pagination="{ clickable: true }"
            :initial-slide="1"
            class="swiperBox"
        >
            <swiper-slide v-for="item in swiperArr" :key="item.id" class="substanceSlide">
                <img :src="url + item.picture" alt="" class="slideImg">
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
.swiperBox {
    margin: auto;
    height: 30vw;
    width: 100%;
}

.swiperBox {
    line-height: 10px;
    font-size: 30px;
    text-align: center;
    background-color: pink;
    border-radius: 10px;
}
.substanceSlide {
    width: 95%;
    height: 100%;
    .slideImg {
        width: 100%;
        height: 100%;
    }
}
/deep/ .swiper-slide .swiper-slide-duplicate {
    margin-right: 0;
}
</style>